<template>
	<el-drawer
		title
		v-if="drawer"
		:visible.sync="drawer"
		:with-header="false"
		custom-class="custom-drawer"
		size="608px"
	>
		<div slot="title" class="title">
			<span
				:class="active === item.active ? 'active' : ''"
				@click="toggle(item)"
				v-for="(item,index) in navList"
				:key="index"
			>{{ item.name }}</span>
		</div>
		<!-- 详细信息 -->
		<div class="detail content" v-loading="isLoading" v-show="active === 'info'">
			<div class="common-title">
				<img src="../../../../assets/images/icon-basic.png">基本信息
			</div>
			<div class="basic-info">
				<div>
					<p>
						<span class="label">项目：</span>
						<span class="label-value">{{ resourceInfo.projectName }}</span>
					</p>
					<p>
						<span class="label">题型：</span>
						<span class="label-value">{{ resourceInfo.questionType |veDict('rc_questionType') }}</span>
					</p>
					<p>
						<span class="label">添加人：</span>
						<span class="label-value">{{ resourceInfo.createUserName }}</span>
					</p>
					<p>
						<span class="label">审核人：</span>
						<span class="label-value">{{ listType==='audit'?'':resourceInfo.checkUserName }}</span>
					</p>
					<p>
						<span class="label">启用状态：</span>
						<span class="label-value">{{ resourceInfo.isAbailable |veDict('isAbailable') }}</span>
					</p>
				</div>
				<div>
					<p>
						<span class="label">科目：</span>
						<span class="label-value">{{ resourceInfo.subjectName }}</span>
					</p>
					<p>
						<span class="label">研发人：</span>
						<span class="label-value">{{ resourceInfo.questionDeveloperName }}</span>
					</p>
					<p>
						<span class="label">修改人：</span>
						<span class="label-value">{{ resourceInfo.updateUserName }}</span>
					</p>
					<p>
						<span class="label">审核状态：</span>
						<span class="label-value">{{ resourceInfo.auditStatus|veDict('questionCheckStatus') }}</span>
					</p>
				</div>
				<!-- <div />
					<div />-->
			</div>
			<div class="basic-info basic-time">
				<p>
					<span class="label">添加时间：</span>
					<span class="label-value">{{ resourceInfo.createTime }}</span>
				</p>
				<p>
					<span class="label">审核时间：</span>
					<span class="label-value">{{ listType==='audit'?'':resourceInfo.checkTime }}</span>
				</p>
				<p>
					<span class="label">最近修改时间：</span>
					<span class="label-value">{{ resourceInfo.updateTime }}</span>
				</p>
			</div>
			<!-- 独立题型&组合题中的子题 显示 -->
			<div v-show="!combinedType.includes(resourceInfo.questionType)">
				<div class="basic-info basic-chapter">
					<span class="label">章节：</span>
					<p class="label-value list">
						<span v-for="(name,index) in resourceInfo.chapterNames" :key="index">{{ name }}</span>
					</p>
				</div>
				<div class="common-title">
					<img src="../../../../assets/images/icon-tag.png">标签信息
				</div>
				<div class="label-box">
					<template v-if="resourceInfo.applicableYear||(resourceInfo.areaRelationListResponseVoList&&resourceInfo.areaRelationListResponseVoList.length)||resourceInfo.labelDetails && (resourceInfo.labelDetails.length)">
						<span class="label" v-if="resourceInfo.applicableYear">试题年份：{{ resourceInfo.applicableYear }}</span>
						<span class="label" v-if="resourceInfo.areaRelationListResponseVoList&&resourceInfo.areaRelationListResponseVoList.length">所属地区：
							<span v-for="(area,index) in resourceInfo.areaRelationListResponseVoList" :key="area.cityName">
								<span v-if="index!==0">、</span>{{ area.cityName }}
							</span>
						</span>
						<span class="label" v-for="label in resourceInfo.labelDetails" :key="label.labelName">
							{{ label.labelName }}：{{ label.labelDetailName }}
						</span>
					</template>
					<template v-else>
						<div class="empty-text">暂无数据</div>
					</template>
				</div>
				<div class="common-title">
					<img src="../../../../assets/images/icon-knowledge.png">知识点
				</div>
				<el-table ref="knowTable" class="table" :data="resourceInfo.knowledgeResponseList">
					<el-table-column
						prop="knowledgeName"
						label="知识点名称"
						width="400"
					/>
					<el-table-column
						prop="knowledgeStarLevel"
						label="星级"
						v-slot="{ row }"
					>
						<div class="star-box" v-if="row.knowledgeStarLevel">
							<img
								v-for="i in row.knowledgeStarLevel"
								:key="i"
								class="img"
								src="@rc/assets/images/icon-star.png"
								alt="星级"
							>
						</div>
					</el-table-column>
				</el-table>
			</div>

			<!-- 暂不实现 -->
			<template v-if="false">
				<div class="common-title">
					<img src="../../../../assets/images/icon-data.png">数据统计
				</div>
				<ve-table class="table" :data="resourceInfo.statisticsList">
					<el-table-column prop="count" label="做题次数" />
					<el-table-column prop="personalNum" label="做题人数" />
					<el-table-column prop="collectNum" label="收藏人数" />
					<el-table-column prop="errorRate" label="错误率" />
				</ve-table>
				<div class="common-title">
					<img src="../../../../assets/images/icon-record.png">组卷记录
				</div>
				<ve-table :data="resourceInfo.testPaperRecordList">
					<el-table-column prop="paperId" label="试卷ID" />
					<el-table-column prop="paperType" label="试卷类型" />
					<el-table-column prop="paperName" label="试卷名称" />
					<el-table-column prop="paperStatus" label="试卷状态" />
				</ve-table>
			</template>
		</div>
		<!-- 操作记录 -->
		<div class="record content" v-if="active === 'record'" v-loading="isLoading">
			<div class="common-title">
				<img src="../../../../assets/images/icon-basic.png">操作记录
			</div>
			<el-table ref="logTable" class="table" :data="recordList">
				<el-table-column prop="operationTime" label="操作时间" />
				<el-table-column prop="operationName" label="操作人" />
				<el-table-column prop="operationContext" label="操作行为" />
			</el-table>
		</div>
	</el-drawer>
</template>
<script>
	import questionApi from "@rc/apis/rc/question.mjs";
	import coursewareApi from "@rc/apis/rc/courseware.mjs";
	export default {
		name: "msgs-dialog",
        props:{
            listType: { //全部试题all 待审核audit 审核失败fail
                type:String,
                default:''
            }
        },
		data() {
			return {
				drawer: false,
				active: "info", // 组件
				navList: [{ name: "详细信息", active: "info" }, { name: "操作记录", active: "record" }],
				recordList: [], // 操作记录-表格
				resourceId: "",
                resourceInfo:{},
                isLoading:false,
                combinedType: ["A", "CF", "L", "C"], //组合题型
			};
		},
		methods: {
			/**
			 * 切换导航
			 */
			toggle(item) {
				if (item.active === this.active) return;
				this.active = item.active;
                if(this.active === 'info') {
                    this.queryQuestionDetailInfo();
                }
                if(this.active === 'record') {
                    this.queryOperationLogs();
                }
			},
			/**
			 * 打开弹窗
			 * @param {String} active info:详细信息，record：操作记录
			 */
			open(resourceId, active) {
				this.drawer = true;
				this.active = active;
				this.resourceId = resourceId;
                if(active === 'info') {
                    this.queryQuestionDetailInfo();
                }
                if(active === 'record') {
                    this.queryOperationLogs();
                }
			},
			/**
			 * 试题详细信息
			 */
			queryQuestionDetailInfo() {
                this.resourceInfo = {};
                this.isLoading = true;
				questionApi.queryQuestionDetailInfo({
					data: {
						resourceId:this.resourceId
					},
					success: (data) => {
                       this.resourceInfo = data;
					},
					complete: () => {
						this.isLoading = false;
					}
				});
			},
			/**
			 * 试题操作记录信息
			 */
			queryOperationLogs() {
                this.recordList = [];
                this.isLoading = true;
				coursewareApi.queryOperationLogs({
					data: {
						resourceId:this.resourceId
					},
					success: (data) => {
                       this.recordList = data;
					},
					complete: () => {
						this.isLoading = false;
					}
				});
			}
		}
	};
</script>
<style scoped lang="less">
	/deep/.custom-drawer {
		.el-drawer__header {
			margin-bottom: 16px;
			padding-left: 30px;
			padding-right: 24px;
		}
		.el-drawer__body {
			overflow: auto;
		}
	}
	.title {
		display: flex;
		flex-direction: row;
		span {
			font-size: 16px;
			display: inline-block;
			padding-bottom: 10px;
			margin-right: 35px;
			cursor: pointer;
			color: #535766;
		}
		span:last-child {
			margin-right: 0;
		}
		.active {
			font-weight: 700;
			color: #ff4436;
			border-bottom: 2px solid #ff4436;
		}
	}
	.content {
		padding: 0 24px 20px 30px;
	}
	.common-title {
		font-size: 14px;
		font-weight: 700;
		height: 46px;
		line-height: 46px;
		color: #3a3d4b;
		display: flex;
		align-items: center;
		img {
			width: 20px;
			height: 20px;
			margin-right: 6px;
		}
	}
	.table {
		margin: 0 0 24px 0;
        .img{
            margin-right: 6px;
        }
	}
    .empty-text{
        color: #909399;
        width: 100%;
        text-align: center;
        font-size: 12px;
    }
	.label-box {
		display: flex;
		flex-direction: row;
		align-items: flex-start;
		flex-wrap: wrap;
		padding: 0 20px 0;
		.label {
			min-width: 60px;
			background: #f5f7f9;
			border: 1px solid #e3e5e7;
			border-radius: 4px;
			padding: 6px 12px;
			font-size: 12px;
			margin: 0 10px 10px 0;
			display: inline-block;
			color: #666;
		}
	}
	.basic-info {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0px 0 0 26px;
		& > div {
			flex: 1;
			margin-right: 5px;
		}
		p {
			display: flex;
			flex-direction: row;
			flex: 1;
			margin-bottom: 18px;
		}
		span {
			display: inline-block;
		}
		.label {
			max-width: 98px;
			font-size: 14px;
			font-weight: 400;
			text-align: left;
			color: #666;
            flex-shrink: 0;
		}
		.label-value {
			flex: 1;
			// overflow: hidden;
			// text-overflow: ellipsis;
			// white-space: nowrap;
			color: #535766;
            font-weight: bold;
            &.list{
                display: flex;
                flex-direction: column;
            }
            &.list span{
                word-break: break-all;
                margin-bottom: 10px;
            }
            &.list span:last-child{
                margin-bottom: 0;
            }
		}
	}
	.basic-chapter {
		p {
			margin-bottom: 6px;
		}
	}
	.basic-time {
		.label {
			min-width: 70px;
			max-width: 100px;
		}
		.label-value {
			min-width: 140px;
		}
	}
    .table{
        /deep/ .el-table__row td:first-child .cell{
            margin-left: 16px;
        }
        /deep/ .has-gutter th:first-child>.cell{
            margin-left: 16px;
        }
    }

</style>
